<template>
    <div>
        <el-page-header @back="goBack" content="查看销售预定单"></el-page-header>
        <!-- <div class="common_line"></div> -->
        <el-form ref="formData" :model="formData" label-width="auto" style="margin-top: 20px;width: 85%;">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="基本信息" name="base">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="客户名称:">
                                <div>{{ formData.customName }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开单日期:">
                                <div>{{ formData.sale_date }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" v-if="setForm.rebates">
                            <el-form-item label="红包(元):">
                                <div>{{ formData.rebates }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="setForm.delivery_address">
                            <el-form-item label="联系地址:">
                                <div>{{ formData.delivery_address }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="经办人:">
                                <div>{{ formData.handler_name }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注:">
                                {{ formData.remark }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="销售商品" name="product">
                    <el-row>
                        <el-table :data="formData.goods" border style="margin-top: 15px;">
                            <el-table-column label="商品图片" align="center" prop="imageUrl">
                                <template slot-scope="scope">
                                    <img :src="scope.row.imageUrl" style="width: 40px;height: 40px;" alt="">
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" align="left" prop="name" />
                            <el-table-column label="商品编号" align="left" prop="goods_no" />
                            <el-table-column label="数量" align="left" prop="num" />
                            <el-table-column label="单价" align="left" prop="unit_price" />
                            <el-table-column label="单位" align="left" prop="unitName" />
                            <el-table-column label="规格" align="left" prop="specifications" />
                            <el-table-column label="库存剩余" align="left" prop="current_inventory_quantity" />
                        </el-table>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="价格明细" name="price" v-if="formData.goods.length">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="商品总价:">
                                <div>{{ '￥'+formData.goods_sum_price }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="总数量:">
                                <div>{{ formData.goods_count }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12" v-if="setForm.payment_discount">
                            <el-form-item label="结款优惠:">
                                <div>{{ '￥'+formData.payment_discount }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="订单金额:">
                                <div style="color: red;">{{ '￥'+formData.order_price }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="预付定金(元):">
                                <div style="color: red;">{{ '￥'+formData.prepaid_money }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结算账户:">
                                <div>{{ formData.payment_str }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="fileLists&&fileLists.length">
                        <div style="font-size: 14px;font-weight: bold;height: 48px;line-height: 48px;">附件</div>
                        <div class="file_list">
                            <div v-for="item in fileLists" :key="'file_'+item.id" class="file" @click="downloadFile(item)">
                                {{ item.file_name }}
                            </div>
                        </div>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-form>

        <bottom-btns
            Width="85%"
            MarginTop="30px"
            :buttons="buttonList"
            @superBtnClick="handleButtonClick"
        ></bottom-btns>

        <!-- 收款记录弹窗 -->
        <el-dialog title="退款记录" :visible.sync="showRecordAlert" :close-on-click-modal="false" width="30%" center append-to-body>
            <div style="padding-left: 40px">
                <el-timeline :reverse="true">
                    <el-timeline-item
                        v-for="(activity, index) in records"
                        :key="'rec_'+index"
                        :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showRecordAlert=false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getOrderSet,  getSaleReserveInfo } from '@/api/order';
import bottomBtns from "@/components/bottomBtns";
const moment = require('moment')

export default {
    name: 'queryOrder',
    components: {
        bottomBtns
    },
    data() {
        return {
            showLoading: false,
            showRecordAlert: false,
            isEdit: false,
            isAdmin: false,
            corp: '',
            pageTitle: '',
            orderId: '',
            setForm: {},
            customFields: [],
            activeNames: ['base', 'product', 'price'],
            formData: {
                customer: '',
                customName: '',
                corp: '',
                goods: [],
                goods_count: '',
                order_price: 0,
                payment_discount: '',
                rebates: '',
                delivery_address: '',
                current_paid_payment: 0,
                sale_date: '',
                sale: [],
                builder: [],
                is_pay: 1,
                handler_user: '',
                handler_name: '',
                pending_payment: '',
                goods_sum_price: '',
                is_draft: false,  //是否草稿
                remark: ''
            },
            customerList: [],
            dialogTitle: '',
            chooseUsers: [],
            salesList: [],
            handlersList: [],
            chooseGoods: [],
            goodsList: [],
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            loadOver: false,  //是否加载完
            queryParams: {
                status: '',
                brand__icontains: '',
                type__icontains: '',
                specifications__icontains: '',
                category_one_level: '',
                category: '',
                search: ''
            },
            categorys: [],
            selectCates: [],
            exchangeId: null,  //预售转单id
            buttonList: [
                { name: '关闭', type: 'cancel', id:'3' }
            ],
            fileLists: [],
            records: []
        }
    },
    props: {
        corpId: {
            type: Number
        },
        editId: {
            type: Number
        }
    }, 
    watch: {
        '$route.query.bussId9': {
            immediate: true, // 首次加载时触发
            handler(newId) {
                if (newId) {
                    this.corp = this.$store.state.corpId
                    this.orderId = newId
                    this.initPageData()
                }
            }
        }
    },
    mounted() {
        this.corp = this.corpId
        if (this.editId){
            this.orderId = this.editId
            this.initPageData()
        }
    },
    methods: {
        goBack() {
            this.$emit('hidden', '')
        },
        initPageData() {
            this.isAdmin = this.$store.state.isAdmin

            this.getOrderFiledSet()
            this.getOrderInfo()
        },
        // 获取自定义字段
        getOrderFiledSet() {
            getOrderSet({corp: this.corp}).then(res => {
                let list = res.data.data.set_order_list
                if (list.length){
                    this.setForm = list[0]

                    let set_field_name = list[0].set_field_name
                    if (!set_field_name){
                        return
                    }
                    for (var i = 1; i < 11; i++) {
                        let keyName = set_field_name['name'+i]
                        if (keyName) {
                            this.$set(this.formData, 'custom_field'+i, '')
                            this.customFields.push({
                                labelName: keyName,
                                modelName: 'custom_field'+i
                            })
                        }
                    }
                }else{
                    this.setId = null
                }
            })
        },
        downloadFile(item) {
            location.href = item.url_show
        },
        // 获取详情
        getOrderInfo() {
            let _this = this
            getSaleReserveInfo(this.orderId,  {corp: this.corp}).then(res => {
                let infos = res.data.data
                _this.formData = infos
                _this.formData.customName = infos.customer_detail.customer_name
                _this.formData.is_pay = infos.is_pay==true?1:0
                _this.formData.remark = infos.remark?infos.remark:''
                _this.formData.prepaid_money = parseFloat(infos.prepaid_money)
                if (infos.pay_type){
                    let json = {
                        1: '现金', 
                        2: '微信',
                        3: '银行转账',
                        4: '其他',
                        5: '支付宝'
                    }
                    _this.formData.payment_str = json[infos.pay_type] || ''
                }
                
                _this.formData.handler_name = infos.handler_user_detail ? infos.handler_user_detail.username : ''
                
                if (infos.draft_payment){
                    _this.$set(_this.formData, 'current_paid_payment', parseFloat(infos.draft_payment))
                    // _this.formData.current_paid_payment = parseFloat(infos.draft_payment)
                }
                // 附件
                _this.fileLists = infos.file_list_show || []

                _this.formData.goods = []
                let all_price = 0
                let all_count = 0
                if (infos.reserve_goods_sale && infos.reserve_goods_sale.length){  //商品
                    infos.reserve_goods_sale.forEach((item, index) => {
                        let allUnits = []
                        item.main_unit_name = item.goods_details.unit_show.name
                        item.main_unit_id = item.goods_details.unit_show.id
                        item.is_multi_unit = false
                        item.unitName = item.main_unit_name
                        item.selectUnitId = item.main_unit_id
                        item.unit_price = item.goods_details.unit_price
                        item.num = item.goods_details.num
                        if (item.deputy_unit) {  //多单位
                            item.unitName = item.deputy_unit_detail?item.deputy_unit_detail.unit_name:''
                            item.is_multi_unit = true
                            item.selectUnitId = item.deputy_unit_detail.goods_unit 
                            item.unit_price = parseFloat(item.deputy_price)
                            item.num = _this.$common.multiplyDivision(parseFloat(item.num), parseFloat(item.deputy_ratio)).toFixed(2)
                            let formatterName = '1'+item.unitName+'='+parseFloat(item.deputy_ratio)+item.goods_details.unit_show.name
                            item.deputy_unit_detail.formatterName = formatterName
                            item.deputy_unit_detail.unit_price = item.unit_price
                            let mainArray = [{
                                goods_unit: item.goods_details.unit_show.id,
                                unit_name: item.goods_details.unit_show.name,
                                formatterName: item.goods_details.unit_show.name,
                                unit_price: item.goods_details.unit_price,
                                unit_retail_price: item.goods_details.unit_retail_price || 0,
                                unit_purchase_price: item.goods_details.unit_purchase_price || 0
                            }]
                            let array = mainArray.concat([item.deputy_unit_detail])
                            allUnits = array.filter(_item => {
                                _item.select = _item.unit_name==item.unitName
                                return _item
                            })
                            item.unitName += ('('+formatterName+')')
                        }
                        
                        _this.formData.goods.push({
                            index: index+1,
                            name: item.goods_details.name,
                            id: item.goods_details.id,
                            num: parseFloat(item.num),
                            select_num: parseFloat(item.num),
                            unit: item.goods_details.unit,
                            unit_price: item.unit_price,
                            goods_no: item.goods_details.goods_no || '',
                            imageUrl: (item.goods_details.image?item.goods_details.image.url:'https://anhuiyaoying.com/icon/default.png'),
                            current_inventory_quantity: parseFloat(item.goods_details.current_inventory_quantity),
                            unitArray: allUnits,
                            select_unit_id: item.selectUnitId,
                            unitName: item.unitName,
                            main_unit_name: item.main_unit_name,
                            is_multi_unit: item.is_multi_unit
                        })
                        all_count += parseFloat(item.goods_details.num)
                        all_price += (_this.$common.multiplyFloat(item.goods_details.num, item.goods_details.unit_price))
                    })
                }
                
                if (infos.goods_sum_price) {
                    _this.formData.goods_sum_price = parseFloat(infos.goods_sum_price)
                }else{
                    _this.formData.goods_sum_price = all_price
                }
                
                if (infos.goods_count) {
                    _this.formData.goods_count = parseFloat(infos.goods_count)
                }else{
                    _this.formData.goods_count = all_count
                }
                _this.formData.payment_discount = parseFloat(infos.payment_discount)
                _this.formData.order_price = parseFloat(infos.order_price)
            })
        },
        // 收款记录
        showRecord() {
            this.records = this.formData.payment_history.filter(item => {
                item.timestamp = item.update_datetime.substring(0, 16)
                item.content = "已退款："+parseFloat(item.current_paid_payment)
                return item
            })
            this.showRecordAlert = true
        },
        // 自定义按钮事件
        handleButtonClick(item) {
            switch (item.id) {
                case '3':   // 取消
                    this.goBack()
                    break;
            
                default:
                    break;
            }
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
    .form_title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        padding: 15px 0;
    }
    .set_user_none {
        margin-left: 10px;
        font-size: 14px;
        color: @blue;
        &:hover {
            cursor: pointer;
        }
    }
    .set_user_done {
        margin-left: 10px;
        font-size: 14px;
        &:hover {
            color: @blue;
            cursor: pointer;
        }
    }
    .file_list {
        font-size: 13px;
        padding-left: 40px;
        .file {
            cursor: pointer;
            padding-bottom: 10px;
            &:hover {
                color: @blue;
            }
        }
    }
    .set_user_dialog {
        padding: 0 10px;
        max-height: 300px;
        overflow-y: auto;
        .item {
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            justify-content: space-between;
            width: 90%;
            .btns {
                display: inline-flex;
                align-items: center;
                font-size: 20px;
                margin-left: 10px;
                width: 60px;
                .add {
                    color: @blue;
                    margin-right: 20px;
                    &:hover{
                        cursor: pointer;
                    }
                }
                .remove {
                    color: red;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .goods_add {
        display: flex;
        align-items: center;
        justify-content: end;
        padding-right: 20px;
        cursor: pointer;
        color: @blue;
        i {
            font-size: 16px;
        }
        span {
            margin-left: 8px;
            font-weight: bold;
            font-size: 14px;
        }
    }
    .goods_list {
        padding: 0 10px;
        max-height: 400px;
        overflow-y: auto;
    }
    .inner_input {
        width: 80px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        background-color: #FFF;
        box-sizing: border-box;
        color: #606266;
        padding: 0 12px;
    }
    .record {
        color: @blue;
        cursor: pointer;
        font-size: 14px;
        padding-right: 20px;
        font-weight: bold;
        text-align: right;;
    }
</style>

<style>
.el-collapse-item__header {
    font-size: 14px;
    font-weight: bold;
}
.el-collapse-item__arrow {
    font-size: 18px;
}
</style>